<script setup>
import { watchEffect } from 'vue';
import { useStore } from 'vuex';
import { computed } from 'vue';
import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router';

const router = useRouter();
const route = useRoute();
const store = useStore();

function toSubCategory(id) {
  // store.dispatch('category/updateSubCategoryList', id);
  router.push({
    name: 'subCategory',
    params: {
      id,
    },
  });
}

store.dispatch('home/updeteHomeBanner');
const homeBanner = computed(() => store.state.home.homeBanner);

// 分类页分类列表
// store.dispatch('category/updateCategoryList', route.params.id);

const stopWatchRoutes = watchEffect(() => {
  store.dispatch('category/updateCategoryList', route.params.id);
});
onBeforeRouteLeave(() => {
  stopWatchRoutes();
});
const categoryList = computed(() => store.state.category.categoryList);

//
</script>

<template>
  <main>
    <div class="main-wrapper">
      <div class="bread-crumbs">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: `/category/${categoryList.parentId}` }">
            {{ categoryList.name }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="main-slideshow">
        <!-- 轮播图 -->
        <el-carousel :interval="3000" v-if="homeBanner.length > 0">
          <el-carousel-item v-for="item in homeBanner" :key="item.id">
            <img :src="item.imgUrl">
          </el-carousel-item>
        </el-carousel>
        <div class="all-category">
          全部分类
        </div>
        <!-- 全部分类  -->
        <div class="all-category-show">
          <div class="all-category-show-item" v-for="item in categoryList.children" :key="item" @click="toSubCategory(item.id)">
            <img :src="item.picture">
            <div> {{ item.name }} </div>
          </div>
        </div>
        <!-- 分类具体种类 -->
        <div
          class="category-specific"
          v-for="g in categoryList.children"
          :key="g.id"
        >
          <div class="category-specific-title"> - {{ g.name }} - </div>
          <a href="#">
            <span>查看全部
              <ArrowRight class="ArrowRight" />
            </span>
          </a>
          <p class="tag"> 温暖柔软 品质之选 </p>
          <div class="category-specific-show">
            <MyCard
              v-for="gg in g.goods"
              :key="gg.id"
              :picture="gg.picture"
              :name="gg.name"
              :desc="gg.desc"
              :price="gg.price"
            >
            </MyCard>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>


<style scoped lang="scss">
main {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  min-width: 1240px;
  .main-wrapper {
    width: 1240px;
    height: 100%;
    margin: 0 auto;
    .bread-crumbs {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #666;
      margin-top: 20px;
    }
    // 轮播图
    .main-slideshow {
      width: 100%;
      height: 500px;
      margin: 0 auto;

      :deep(.el-carousel__container) {
        position: relative;
        width: 1240px;
        height: 500px;
        margin: 0 auto;


        .el-carousel__arrow--left {
          width: 50px;
          height: 50px;
          font-size: 30px;
          left: 16px;
        }

        .el-carousel__arrow--right {
          width: 50px;
          height: 50px;
          font-size: 30px;
        }

      }
      :deep(.el-carousel__button) {
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }
    }

    // 全部分类四个字
    .all-category {
      width: 100%;
      height: 100px;
      color: #666;
      margin-top: 24px;
      font-size: 28px;
      text-align: center;
      line-height: 100px;
      background-color: #fff;
    }
    // 全部分类展示
    .all-category-show {
      width: 100%;
      height: 160px;
      background-color: #fff;
      display: flex;
      padding: 0 20px;
      .all-category-show-item {
        width: 168px;
        height: 160px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        user-select: none;
        img {
          width: 100px;
          height: 100px;
          margin-bottom: 8px;
        }
        &:hover {
          color: #27ba9b;
          cursor: pointer;
        }
      }
    }
    // 分类具体种类
    .category-specific {
      width: 100%;
      background-color: #fff;
      margin-top: 24px;
      position: relative;
      .category-specific-title {
        width: 100%;
        height: 100px;
        color: #666;
        font-size: 28px;
        text-align: center;
        line-height: 100px;
        background-color: #fff;
      }
      a {
        width: 82px;
        text-decoration: none;
        color: #999999;
        position: absolute;
        top: 20px;
        right: 16px;
        span {
          display: flex;
          align-items: center;
          .ArrowRight {
            width: 14px;
            height: 14px;
          }
        }
        &:hover {
          cursor: pointer;
          color: #27ba9b;
        }
      }
      .tag {
        width: 100%;
        height: 28px;
        color: #999;
        font-size: 20px;
        text-align: center;
        line-height: 28px;
        background-color: #fff;
        margin-top: -20px;
      }
      .category-specific-show {
        width: 100%;
        padding: 0 65px 30px;
        background-color: #fff;
        display: flex;
        margin-top: 20px;
      }
    }
  }
}
</style>
